<template>
  <body id="poster" :style="backtype">

  <transition name="el-fade-in-linear">
    <div v-show="showPanel">
      <el-form class="login-container" :model="loginForm" label-position="left" label-width="100px">
        <h3 class="login_title">登录</h3>
        <el-form-item prop="name" label="用户名">
          <el-input type="text" v-model="loginForm.name" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>

        <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item label-width="0px">
          <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="loginSubmit">登录</el-button>
          <span></span>
          <el-button type="success" style="width: 100%;background: #505458;border: none" v-on:click="change(1)">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </transition>

  <transition name="el-fade-in">
    <div v-show="showPanel2">
      <el-form class="login-container" :model="registerForm" ref="registerForm" :rules="registerRules" label-position="left" label-width="100px">
        <h3 class="login_title">注册</h3>
        <el-form-item prop="name" label="用户名" >
          <el-input type="text" v-model="registerForm.name" auto-complete="off" placeholder="用户名"></el-input>
        </el-form-item>

        <el-form-item prop="email" label="邮箱">
          <el-input v-model="registerForm.email" auto-complete="off" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="verifyCode" label="验证码">
          <el-input type="text" v-model="registerForm.verifyCode" auto-complete="off" placeholder="验证码" style="width: 50%"></el-input>
          <el-button @click="checkEmail">{{sendEmailLable}}</el-button>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input type="password" v-model="registerForm.password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>

        <el-form-item label-width="0px">
          <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="registSubmit('registerForm')">注册
          </el-button>
          <span></span>
          <el-button type="success" style="width: 100%;background: #505458;border: none" v-on:click="change(2)">登陆
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </transition>

  </body>
</template>


<script>
  import {login,sendEmail,register} from '../api/aliyun.js';
  import {saveUserInfo} from '../api/cache.js';
  export default {
    name: 'Login',
    data() {
      return {
        loginForm: {
          name: '',
          password: ''
        },
        registerForm: {
          name: '',
          password: '',
          email:'',
          verifyCode:''
        },
        responseResult: [],
        showPanel: true,
        showPanel2: false,
        sendEmailLable: '发送验证码',
        registerRules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          verifyCode: [
            { required: true, message: '请输入邮箱验证码', trigger: 'blur' }
          ]
        },
        backtype:{
          background: 'url(/image/1.jpg) no-repeat center',
          height: '100vh',
          width: '100%',
          backgroundSize: 'cover',
          position: 'fixed'
        }
      };
    },
    methods: {
      loginSubmit() {
        console.log('查询参数：' + JSON.stringify(this.loginForm));
        login(this.loginForm).then(resp => {
          if (resp.success) {
            saveUserInfo(resp.data);
            this.$router.push('/index');
          } else {
            this.$message.error(resp.errorMsg);
          }
        });
      },
      registSubmit(formName) {
        console.log('注册参数：' + JSON.stringify(this.registerForm));
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 验证通过执行提交
            register(this.registerForm).then(resp => {
              if (resp.success) {
                //切换登录面板
                this.change(2);
              } else {
                this.$message.error(resp.errorMsg);
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      checkEmail() {
        let email = this.registerForm.email;
        if(email.trim() == ''){
          return;
        }
        sendEmail(email).then(resp => {
          if (resp.success) {
            this.$message({
              showClose: true,
              message: '邮件已发送',
              type: 'success'
            });
          } else {
            this.$message.error(resp.errorMsg);
          }
        });
      },
      change(type) {
        let _this = this;
        if (type == 1) {
          this.showPanel = !this.showPanel;
          setTimeout(
            function () {
              _this.showPanel2 = !_this.showPanel2;
            }, 300);
        } else {
          this.showPanel2 = !this.showPanel2;
          setTimeout(
            function () {
              _this.showPanel = !_this.showPanel;
            }, 300);
        }
      }
    }
  };
</script>

<style>
  body {
    margin: 0px;
    padding: 0;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background-color: rgba(255,255,255,0.4);
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }


</style>
